<template>
	<view class="wf-item-page">
		<!-- <template v-if="index == 0 && direction == 'left'&& h5Img">
			<view class="wf-image">
				<image :src="h5Img" mode="widthFix" class="item-img" />
			</view>
		</template> -->
		<template>
			<!-- #ifdef MP -->
			<image :lazy-load="true" :src="item.goodsImage ||item.thumbnail" mode="widthFix" class="item-img" />
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<image v-lazy="item.goodsImage||item.thumbnail" :src="item.goodsImage ||item.thumbnail" class="item-img"></image>
			<!-- #endif -->
			<view class="item-title">
				{{item.goodsName}}
			</view>
			<view class="item-info">
				<view class="item-info-left" v-if="hasLogin || (!hasLogin && showBeforeLogin == 1)">
					<!-- <text class="price">￥{{item.goodsPrice}}</text>
					<text class="yPrice">￥{{item.marketPrice}}</text> -->
					<view><text
							class="price">￥{{item.goodsPrice?item.goodsPrice:'0'}}</text>
					</view>
				</view>
				<view class="item-info-left" v-else>
					<text class="price">登录查看</text>
				</view>
				<view class="buy-btn">
					<text class="btn-text" @click.stop="addCart(item)">+</text>
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				require: true
			},
			direction: {
				type: String,
				default: ''
			},
			index: {
				type: Number,
				default: 0
			},
			h5Img: {
				type: String,
				default: ''
			},
			hasLogin: {
				type: Boolean,
				default: false
			},
			showBeforeLogin: {
				type: String|Number,
				default: ''
			}
		},
		data() {
			return {
				integralRule: {
					priceShowWay: 1,
					
				},
			}
		},
		mounted() {
			this.integralRule = uni.getStorageSync('integralRule')
		},
		methods: {
			addCart(item) {
				this.$emit('addCart', item);
			}
		},
		watch: {
			item(val) {
				console.log(val)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$page-padding:20rpx;
	.integral {
		color: $uni-color-primary;
		font-size: 15px;
		// margin: 4rpx 4rpx 0 4rpx;
	
		&:before {
			background: url(../../static/money.png) no-repeat;
			width: 24rpx;
			height: 24rpx;
			margin-right: 4rpx;
			display: inline-block;
			content: '';
			background-size: contain;
		}
	
		&:after {
			margin-left: 4rpx;
			content: '积分';
			color: #909090;
			font-size: 10px;
		}
	}
	
	.price {
		// padding-left: 28rpx;
		text-align: left;
		display: block;
		font-size: 13px;
		color: #646464;
	}
	.wf-item-page {
		background: #fff;
		overflow: hidden;
		border-radius: 10rpx;
		width: calc(100% - #{$page-padding});
	}

	.item-img {
		width: 100%;
		border-radius: 10rpx;
		height: calc((100vw - 3 * #{$page-padding}) / 2);
	}

	.item-title {
		padding: 0 15rpx;
		color: #222428;
		word-break: break-all;
		// padding-right: 5px;
		// width: calc((100vw - 2 * 14px - 10px) / 2);
		 min-height: 80rpx;
		overflow:hidden;  //超出文本隐藏
		 
		text-overflow:ellipsis;  ///超出部分省略号显示
		 
		display:-webkit-box;  //弹性盒模型
		 
		-webkit-box-orient:vertical;  //上下垂直
		 
		-webkit-line-clamp:2;  //自定义行数
	}

	.item-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15rpx 15rpx;
		// padding-bottom: 15rpx;
		// position: relative;
		// padding-top: 15rpx;

		.price {
			color: #f09536;
			font-size: 28rpx;
		}

		.yPrice {
			color: #CCCCCC;
			font-size: 18rpx;
			margin-left: 10rpx;
			text-decoration: line-through;
		}

		.buy-btn {
			// position: absolute;
			// bottom: 8rpx;
			// right: 20rpx;
			// margin-left: 33rpx;
			// right: 23rpx;
			// top: 186rpx;
			// margin-top: 100rpx;
			width: 45rpx;
			height: 45rpx;
			background: linear-gradient(135deg, #F73B6D 0%, #F6160F 100%);
			border-radius: 22px;
			text-align: center;

			.btn-text {
				color: #FFFFFF;
				font-size: 40rpx;
				line-height: 38rpx;
			}
		}
	}

	.info-avatar {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		margin-right: 5px;
	}

	.info-nickname {
		font-size: 12px;
		color: #333;
	}

	.wf-image {
		image {
			display: block;
		}
	}
</style>
